<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<title>检测手机倾斜</title>
		<style>
			body,html{
				margin: 0;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			#view{
				height: 100%;
				overflow: hidden;
				perspective: 300px;
				-webkit-perspective: 300px;
			}
			#box{
				position: absolute;
				left: 50%;
				top:50%;
				width: 1024px;
				height: 768px;
				margin: -384px 0 0 -512px;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				transition: .3s;
			}
			#box div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: center center no-repeat;
				background-size: cover; 
			}
			#box div:nth-of-type(1){
				background-image: url(img/1.jpg);
			}
			#box div:nth-of-type(2){
				background-image: url(img/2.jpg);
			}
			#box div:nth-of-type(3){
				background-image: url(img/3.jpg);
			}
			#box div:nth-of-type(4){
				background-image: url(img/4.jpg);
			}
		</style>
	</head>
	<body>
		<div id="view">
			<div id="box">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<script src="../transform/js/m.Tween.js"></script>
		<script>
			(function(){
				var box = document.querySelector("#box");
				var divs = box.querySelectorAll("div");
				//css(box,'translateZ',-2000);
				var start;
				var last;
				css(box,'rotateY',0);
				for(var i = 0; i < divs.length; i++){
					css( divs[i],'rotateY',i*90 );
					css( divs[i],'translateZ',-512 );
				}
//				MTween({
//					el:box,
//					target:{rotateY:"360"},
//					time:2000,
//					type:"linear"
//				})
				window.addEventListener('deviceorientation',function(e){
					var y = Math.round(e.gamma);
					if(typeof start == 'undefined'){
						start = y;
						last = start;
						return;
					}
					y = y-start;
					if(Math.abs(y - last) > 5){
						css(box,"rotateY",y);
						last = y;
					}
					
				
				})
			})()
		</script>
	</body>
</html>
